<template>
  <div :class="`message-${type}`">
    <div v-if="type === 'user'" :class="`text-${type}`">{{ content }}</div>
    <div v-if="type === 'llm'" :class="`text-${type}`">
      <MarkdownRenderer :content="content" />
    </div>
  </div>
</template>

<script setup lang="ts" name="UserMessage">
import { toRefs } from 'vue'
import MarkdownRenderer from './MarkdownRenderer.vue'
import type { LDMessage } from '@/llmDialog/types';
import { computed } from 'vue';

const props = defineProps({
  message: {
    type: Object as () => LDMessage,
    default: () => ({ type: '', content: '' }),
  },
})

const { type } = props.message
const content = computed(() => props.message.content || '')
</script>

<style scoped>
.message-user,
.message-llm {
  width: 100%;
}
/* 单个消息 */
.message-user {
  align-self: flex-end;
  display: flex;
  flex-direction: row-reverse;
}
.message-llm {
  align-self: flex-start;
  display: flex;
  flex-direction: row;
}

/* 消息文本 */
.text-user,
.text-llm {
  border-radius: 10px;
  min-width: 0;
  color: var(--ld-color-text);
  transition: color var(--ld-transition-duration);
}
.text-user {
  margin-left: 50px;
  margin-right: 10px;
  padding: 8px 20px;
  background-color: var(--ld-color-primary);
}
.text-llm {
  padding: 0 10px;
  flex: 1;
}

/* 消息图标 */
.icon-box {
  margin: 8px;
  flex-shrink: 0;
}
</style>
